<template>
  <div>
    <el-card>
      <template #header>
        <el-button type="primary">添加新角色</el-button>
      </template>
      <el-table :data="roles" border height="scorll" size="small">
        <template v-slot:empty>
          <el-empty description="查无数据"></el-empty>
        </template>
        <el-table-column type="expand" label="">
          <template #default="{ row }">
            <!-- <pre>{{ row.children }}</pre> -->
            <el-row v-for="levelOne in row.children" :key="levelOne.id">
              <el-col :span="4">{{ levelOne.authName }}</el-col>
              <el-col :span="20">
                <el-row
                  v-for="levelTwo in levelOne.children"
                  :key="levelTwo.id"
                >
                  <el-col :span="4">{{ levelTwo.authName }}</el-col>
                  <el-col :span="20">
                    <el-tag
                      type="danger"
                      v-for="levelThree in levelTwo.children"
                      :key="levelThree.id"
                      >{{ levelThree.authName }}</el-tag
                    >
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          label="#"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column prop="roleName" label="角色名称"> </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
        <el-table-column label="操作" width="380">
          <template #default="{ row }">
            <el-button type="primary" icon="el-icon-edit" size="mini"
              >编辑</el-button
            >
            <el-button type="danger" icon="el-icon-delete" size="mini"
              >删除</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-setting"
              size="mini"
              @click="showAllotRight(row)"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <AllotRightDailog ref="allotDailog" title="角色权限分配"></AllotRightDailog>
  </div>
</template>

<script>
import AllotRightDailog from "@/components/rolesDialog/AllotRightDailog.vue";
export default {
  components: {
    AllotRightDailog,
  },
  data() {
    return {
      roles: [],
    };
  },
  methods: {
    showAllotRight(role) {
      let roleId = role.id;
      let rights = role.children;
      console.log(rights);
      let nodes = [];
      for (let levelOne of rights) {
        for (let levelTwo of levelOne.children) {
          nodes = nodes.concat( levelTwo.children )
        }
      }
      console.log(nodes);
      this.$refs.allotDailog.open(nodes,roleId);
    },
    async loadAllRoles() {
      let roles = await this.$api.getAllRoles();
      if (roles) {
        this.roles = roles;
      }
    },
  },
  created() {
    this.loadAllRoles();
  },
};
</script>

<style lang="less" scoped>
.el-card {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  :deep(.el-card__body) {
    flex-grow: 1;
    padding-bottom: 70px;
    overflow: hidden;
  }
}
// :deep(.el-table__body-wrapper){
//   height: 100%!important;
// }
.el-table {
  height: 100%;
}
.search-input {
  width: 400px;
  margin-right: 20px;
}
.el-pagination {
  padding: 20px;
  text-align: center;
}
</style>